<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投递记录</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="css/mescroll.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        (function(e,t){
            var i=document,n=window;var l=i.documentElement;var r,a;var d,o=document.createElement("style");var s;function m(){var i=l.getBoundingClientRect().width;if(!t){t=540}if(i>t){i=t}var n=i*28/e;o.innerHTML="html{font-size:"+n+"px;}"}r=i.querySelector('meta[name="viewport"]');a="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";if(r){r.setAttribute("content",a)}else{r=i.createElement("meta");r.setAttribute("name","viewport");r.setAttribute("content",a);if(l.firstElementChild){l.firstElementChild.appendChild(r)}else{var c=i.createElement("div");c.appendChild(r);i.write(c.innerHTML);c=null}}m();if(l.firstElementChild){l.firstElementChild.appendChild(o)}else{var c=i.createElement("div");c.appendChild(o);i.write(c.innerHTML);c=null}n.addEventListener("resize",function(){clearTimeout(s);s=setTimeout(m,300)},false);n.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(s);s=setTimeout(m,300)}},false);if(i.readyState==="complete"){i.body.style.fontSize="16px"}else{i.addEventListener("DOMContentLoaded",function(e){i.body.style.fontSize="14px"},false)}})(750,750);
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: white
        }

        ul {
            list-style-type: none
        }

        img {
            width: 100%;
            vertical-align: bottom;
        }

        /*列表*/
        .mescroll {
            position: fixed;
            top: 1rem;
            bottom: 0;
            height: auto;
        }

        /*下拉刷新回调的提示*/
        .download-tip {
            z-index: 9900;
            position: fixed;
            top: 20px;
            left: 0;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            text-align: center;
            background-color: rgba(80, 175, 85, .7);
            color: white;
            -webkit-transition: top 300ms;
            transition: top 300ms;
        }

        /*展示上拉加载的数据列表*/
        .news-list li {
            padding: 16px;
            border-bottom: 1px solid #eee;
        }

        .news-list .new-content {
            font-size: 1rem;
            margin-top: 6px;
            margin-left: 10px;
            color: #666;
        }

        .has-tit {
            font-weight: bold;
            font-size: 1.142857rem;
            padding-bottom: 0.3rem;
        }

        .new-content {
            position: relative;

        }

        .new-content .right-content {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }

        .top {
            background: #ddd;
            padding: 17px 27px 10px 24px;
            font-size: 14px;
            text-align: center;
            border-radius: 22px 0px 22px 1px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <p id="downloadTip" class="download-tip"></p> -->
        <!--滑动区域-->
        <div id="mescroll" class="mescroll">
            <!--展示上拉加载的数据列表-->
            <ul id="newsList" class="news-list">
                <li>
                    <div class="new-content">
                        <div class="left-content">
                            <p class="has-tit">销售经理</p>
                            <p>北京位来教育科技有限公司</p>
                            <p>投递时间:2020-12-23 11:17:56</p>
                        </div>
                        <div class="right-content">
                            <div class="status-content">
                                已投递
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</body>
<script src="./js/mescroll.min.js"></script>
<script>
    $(function () {
        //创建MeScroll对象
        var mescroll = initMeScroll("mescroll", {
            down: {
                auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
                callback: downCallback, //下拉刷新的回调
            },
            up: {
                auto: true,//初始化完毕,是否自动触发上拉加载的回调
                isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                callback: upCallback, //上拉加载的回调
                toTop: false
            }
        });
        /*下拉刷新的回调 */
        function downCallback() {

            //加载列表数据
            getListDataFromNet(0, 1, function (data) {
                //联网成功的回调,隐藏下拉刷新的状态
                mescroll.endSuccess();
                //设置列表数据
                setListData(data, false);
                //显示提示
                $("#downloadTip").css("top", "44px");
                setTimeout(function () {
                    $("#downloadTip").css("top", "20px");
                }, 2000);
            }, function () {
                //联网失败的回调,隐藏下拉刷新的状态
                mescroll.endErr();
            });
        }
        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function upCallback(page) {
            //联网加载数据
            getListDataFromNet(page.num, page.size, function (curPageData) {
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length);

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

                //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                mescroll.endSuccess(curPageData.length);

                //提示:curPageData.length必传的原因:
                // 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
                // 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
                // 3.使配置的noMoreSize生效

                //设置列表数据
                setListData(curPageData, true);
            }, function () {
                //联网失败的回调,隐藏上拉加载的状态
                mescroll.endErr();
            });
        }
        /*设置列表数据*/
        function setListData(curPageData, isAppend) {
            var listDom = document.getElementById("newsList");
            for (var i = 0; i < curPageData.length; i++) {
                var newObj = curPageData[i];

                var str = '';
                str += '<div id="' + i + '" class="new-content">' + newObj.content + '</div>';
                var liDom = document.createElement("li");
                liDom.innerHTML = str;

                if (isAppend) {
                    listDom.appendChild(liDom);//加在列表的后面,上拉加载
                } else {
                    listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
                }
            }
        }
        /*联网加载列表数据
         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
         * */
        var downIndex = 0;
        function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
            //延时一秒,模拟联网
            setTimeout(function () {
                try {
                    var newArr = [];
                    if (pageNum == 0) {
                        //此处模拟下拉刷新返回的数据
                        downIndex++;
                        var newObj = { content: '<div class="left-content">' + '<p class="has-tit">销售经理</p>' + '<p>北京位来教育科技有限公司</p>' + '<p>投递时间:2020-12-23 11:17:56</p>' + '</div>' + '<div class="right-content">' + '<div class="status-content">已录取</div></div>' };
                        newArr.push(newObj);
                    } else {
                        //此处模拟上拉加载返回的数据
                        for (var i = 0; i < pageSize; i++) {
                            var upIndex = (pageNum - 1) * pageSize + i + 1;
                            var newObj = { content: '<div class="left-content">' + '<p class="has-tit">销售经理</p>' + '<p>北京位来教育科技有限公司</p>' + '<p>投递时间:2020-12-23 11:17:56</p>' + '</div>' + '<div class="right-content">' + '<div class="status-content">已投递</div></div>' };
                            newArr.push(newObj);
                        }
                    }
                    //联网成功的回调
                    successCallback && successCallback(newArr);
                } catch (e) {
                    //联网失败的回调
                    errorCallback && errorCallback();
                }
            }, 2000)
        }


    });
    function initMeScroll(mescrollId, options) {
        //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除)
        var myOption = {
            down: {
                offset: 60, //触发刷新的距离
                htmlContent: '<p class="downwarp-progress"><p>', //布局内容
                //			inited: function(mescroll, downwarp) {
                //				//初始化完毕的回调,可缓存dom
                //				mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0];
                //			},
                //			inOffset: function(mescroll) {
                //				//进入指定距离范围内那一刻的回调
                //				mescroll.downProgressDom.classList.remove("mescroll-rotate");
                //			},
                //			onMoving: function(mescroll, rate, downHight) {
                //				//下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
                //				var progress = 360 * rate;
                //				mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)";
                //				mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)";
                //			},
                //			showLoading: function(mescroll) {
                //				//触发下拉刷新的回调
                //				mescroll.downProgressDom.classList.add("mescroll-rotate");
                //			}
            },
            up: {
                htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p>', //上拉加载中的布局
                // htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局
                // showLoading: function (mescroll, upwarp) {
                //     //上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染
                //     upwarp.innerHTML = mescroll.optUp.htmlLoading;
                // },
                // showNoMore: function (mescroll, upwarp) {
                //     //无更多数据
                //     upwarp.innerHTML = mescroll.optUp.htmlNodata;
                // },
                toTop: {
                    src: "option/mescroll-totop.png" //回到顶部按钮的图片路径
                }
            }
        }
        //加入自定义的默认配置
        options = MeScroll.extend(options, myOption);
        //创建MeScroll对象
        return new MeScroll(mescrollId, options);
    }


</script>

</html>